<template>
  <div class="renew">
    <p class="center caption">{{$t('ndxStake.memberTq')}}</p>
    <!-- 升级 -->
    <div class="upgrade" v-show="typeStatus === 0">
      <div class="flexb accoutTabCont">
        <div v-for="(item, index) in accountActiveList"
          :key="index"
          class="accountTab"
          :class="{'accountChangeClass': index === accountActive}"
          @click="handleChangeActive(index)">
          {{ $t(`renew.${item.label}`) }}
        </div>
      </div>
      <!-- 为本账户升级会员特权 -->
      <div class="ownAccount">
        <!-- 本账户 -->
        <div class="accountLevel" v-if="!accountActive">
          <span>{{ $t('order.account') }}：</span>
          <span>
            <span style="font-size: 15px;">{{ user.account }}</span>
            (<span style="font-size: 13px;">{{$store.state.app.scatter.chain.toUpperCase()}}</span>)
          </span>
          <span class="icon" style="cursor: pointer;">
            <img v-if="user"
            :src="handleGetVipLogo()" alt="">
          </span>
          <span v-if="!vipMode && user.consumeLevel">（{{$t('renew.expire', { time : expireTime})}}）</span>
        </div>
        <!-- 其他账户 -->
        <div class="flex otherInput" v-else :class="{'flexc': accountActive && !comfirmAccount}">
          <user-label
            :user="user"
            @listenUserLabel="listenUserLabel"
            :unstakeList="unstakeList"
            :getAccount_iserror="getAccount_iserror"
            :otherAccountInfo="otherAccountInfo"
            :accountName="accountName"
            :accountActive="accountActive"
            :vipMode="vipMode"/>
        </div>
        <!-- 为其他账户抵押已经10级满级 -->
        <div class="otherAccount">
          <!-- 此账户已达最高等级，无需继续升级。 -->
          <p class="center commonColor" style="margin-top: 35px;" v-if="
          (accountActive === 0 && typeActive === 0 && user.consumeLevel >= 10)
          || (accountActive === 1 && typeActive === 0 && otherAccountInfo.consumeLevel >= 10)
          || (accountActive === 1 && typeActive === 1 && otherAccountInfo.stakeLevel >= 10)">
          {{ $t('renew.otherAccountTop') }}</p>
          <el-button v-if="
          accountActive === 0 && typeActive === 0 && user.consumeLevel >= 10
          || accountActive === 1 && !comfirmAccount
          || (accountActive === 1 && typeActive === 0 && otherAccountInfo.consumeLevel >= 10)
          || (accountActive === 1 && typeActive === 1 && otherAccountInfo.stakeLevel >= 10)"
          class="accountBtn" @click="handleComfirmAccount">{{ $t('public.sure') }}</el-button>
        </div>
        <div v-show="(accountActive === 0 && typeActive === 0 && user.consumeLevel < 10)
          || (accountActive === 1 && comfirmAccount && typeActive === 0 && user.consumeLevel < 10)
          || (accountActive === 0 && typeActive === 1 && user.stakeLevel <= 10)
          || (accountActive === 1 && comfirmAccount && typeActive === 1 && user.stakeLevel < 10)">
          <!-- 升级方式 -->
          <div class="upgradeType">
            <p>
              <span>
                {{$t('renew.upgradeType')}}：
              </span>
              <!-- 是会员 -->
              <template v-for="(item, index) in typeActiveList">
                <span
                  v-if="item.value === typeActive"
                  :key="index"
                  class="">
                  {{ $t(`renew.${item.label}`) }}
                </span>
              </template>
              <span class="commonColor"
              style="cursor: pointer; margin-left: 8px;"
              @click="handleChange" v-if="!comfirmAccount">
                {{$t('renew.replace')}}>
              </span>
            </p>
            <!-- 非会员 -->
            <div class="mb5" v-if="accountActive">
              <template v-for="(item, index) in typeActiveList">
                <div :key="index"
                  @click="handleChangeTypeActive(item.value)"
                  class="typeTab"
                  :class="{'changeClass': item.value === typeActive}">
                  {{ $t(`renew.${item.label}`) }}
                </div>
              </template>
            </div>
            <p class="color999" v-if="accountActive">{{$t('renew.upgradeOther')}}</p>
          </div>
          <!-- 选择等级 -->
          <div class="selectLevel">
            <p>{{$t('renew.selectUpgrade')}}</p>
            <div class="levelBtn btnLeft">
              <i class="iconfont el-icon-arrow-left"></i>
            </div>
            <div class="levelBtn btnRight">
              <i class="iconfont el-icon-arrow-right"></i>
            </div>
            <!-- 列表 -->
            <div class="mb15 levelCont">
              <!-- swiper -->
              <swiper ref="mySwiper" :options="swiperOption">
                <template v-for="(item, index) in levelList">
                  <swiper-slide
                  v-if="(item.value > user.consumeLevel && typeActive === 0)
                  || typeActive === 1"
                  :key="index">
                    <div class="levelTab"
                      :class="{'changeClass': item.value === levelActive, 'disable': item.disable}"
                      @click="handleLevelActive(item.value, item.disable)">
                      <img :src="item.icon" alt="" class="levelImg">
                      <!-- 消耗 -->
                      <span v-if="!typeActive">{{$t('renew.consume')}}</span>
                      <!-- 抵押 -->
                      <span v-else>{{$t('ndxStake.stakes')}}</span>
                      <!-- 单位 -->
                      <div class="price center">
                        <span class="priceNum commonColor">{{ item.num >= 10000 ? `${item.num / 1000}K` : item.num }}</span>
                        <p v-if="!typeActive" class="center mt5">
                          <span>NDX/{{$t('renew.month')}}</span>
                        </p>
                        <span v-else>NDX</span>
                      </div>
                    </div>
                    <div class="swiper-pagination" slot="pagination"></div>
                  </swiper-slide>
                </template>
              </swiper>
            </div>
          </div>
          <!-- 选择有效期/已抵押 -->
          <div class="validity" v-if="!typeActive">
            <div class="flex mb5" v-if="user && user.consumeLevel === 0">
              <span class="color333" style="margin-right: 8px;">{{$t('renew.selectTime')}}</span>
              <el-tooltip effect="light" placement="top">
                <div slot="content">
                  1{{$t('renew.months')}}=30{{$t('apiTrade.competitionDay')}}
                </div>
                <div class="volatility">
                  <i class="iconfont icon-huaban"></i>
                </div>
              </el-tooltip>
            </div>
            <!-- 有效期列表 -->
            <div class="validityList">
              <!-- 是会员 大于一个月-->
              <p v-if="user && user.consumeLevel && (lastDays >= 30)">{{$t('renew.payUpgrade')}}</p>
              <!-- 小于一个月 -->
              <p class="commonColor" v-if="user && user.consumeLevel && (lastDays < 30)">{{$t('renew.tipUpgrade')}}</p>
              <!-- 非会员 -->
              <div v-if="user && user.consumeLevel === 0" class="validityWrap">
                <div v-for="(item, index) in validityList"
                  :key="index"
                  class="validityTab"
                  :class="{'changeClass': item.active === validityActive}"
                  @click="handleValidityActive(item.active)">
                  {{ item.period }}{{$t('renew.months')}}
                  <span class="tag" v-if="item.discount!==1">
                    <span v-if="$store.state.app.language === 'zh-CN'">
                      {{ item.discountFormat }}折
                    </span>
                    <span v-else>
                      {{ 100 - Number(accMul(item.discountFormat, 10)) || 0 }}% off
                    </span>
                  </span>
                </div>
              </div>
              <p class="mortgable" :style="user && user.consumeLevel === 0 ? 'margin-top: 15px;' : 'margin-top: 5px;'">
                {{$t('renew.myBalance')}}：{{ toFixed(ndxCanStakeBlance, 4) }} NDX
              </p>
              <!-- <p class="mortgable" style="margin-top: 10px;" v-if="typeActive === 0">
                {{$t('renew.myBalance')}}：{{ toFixed(ndxCanStakeBlance, 4) }} NDX
              </p> -->
            </div>
          </div>
          <div class="validity" v-else>
            <!-- 自己抵押升级 -->
            <div class="mb15 mortgableCont" v-if="!accountActive">
              <div class="flexb mb5">
                <!-- 自己抵押 -->
                <span>{{$t('ndxStake.youStake')}}</span>
                <span style="width: 200px;">{{$t('ndxStake.own')}}：{{ toFixed(selfStakeNumber, 4)}} NDX</span>
              </div>
              <div class="flexb mb5">
                <span>{{toFixed(stakeOrtherNumber, 4)}} NDX</span>
                <span style="width: 200px;">
                  {{$t('ndxStake.others')}}：{{ (stakeOrtherNumber - selfStakeNumber).toFixed(4) }} NDX
                </span>
              </div>
              <div class="right">
                <span class="commonColor ml"
                  v-if="!accountActive"
                  @click="handleMortgageNdxShow(2, 0)"
                  style="cursor: pointer;">{{$t('ndxStake.redeem')}} ></span>
              </div>
            </div>
            <!-- 为别人抵押升级 -->
            <div class="mb15 mortgableCont" v-if="accountActive && !getAccount_iserror">
              <div class="flexb mb5">
                <!-- 总抵押/您为该账户抵押 -->
                <span>{{$t('renew.allMor')}}：</span>
                <span style="width: 180px;">{{$t('renew.otherMortgage')}}：</span>
              </div>
              <div class="flexb mb5">
                <span>{{toFixed(otherAccountInfo.ndxStaked, 4)}} NDX</span>
                <span style="width: 180px;">{{ toFixed(theAccountStaked, 4) }} NDX</span>
              </div>
              <div class="right">
                <span class="commonColor" style="cursor: pointer;" v-if="theAccountStaked" @click="handleMortgageNdxShow(2, 1)">
                  {{$t('ndxStake.redeem')}} >
                </span>
              </div>
            </div>
            <!-- 您剩余可抵押 -->
            <p class="mortgable flexb">
              <span>{{$t('renew.youCanStake')}}{{ toFixed(ndxCanStakeBlance, 4) }} NDX</span>
            </p>
          </div>
          <div class="bottomCont">
            <div v-if="checkedLevel">
              <!-- 支付提示信息 -->
              <p class="center result" v-if="!typeActive">
                {{$t('renew.consume')}}
                <span class="commonColor">{{ checkedLevel.discountStake }}</span>，
                {{$t('renew.upgradeTo')}}
                <span class="commonColor">VIP {{ checkedLevel.value }}</span>
                <span v-if="user && !user.consumeLevel">
                  ，{{$t('renew.period')}}
                  <span class="commonColor">{{ checkedLevel.period }}{{$t('renew.months')}}</span>
                </span>
              </p>
              <template class="center result" v-else>
                <p class="center" v-if="this.checkedLevel.value !== this.user.stakeLevel">
                  <span v-if="checkedLevel.stake >= 0">
                    {{$t('renew.addMortgage')}}
                  </span>
                  <span v-else>
                    {{$t('ndxStake.redeem')}}
                  </span>
                  <span class="commonColor">{{ checkedLevel.stakeFormat }}</span>，
                  <span v-if="checkedLevel.stake >= 0">
                    {{$t('renew.upgradeTo')}}
                  </span>
                  <span v-else>
                    {{$t('renew.reduceTo')}}
                  </span>
                  <span class="commonColor">VIP {{ checkedLevel.value }}</span>
                </p>
              </template>
            </div>
            <!-- 确定升级按钮 -->
            <div class="comfirmBtn">
              <el-button class="btn" :disabled="checkedLevel.value === user.stakeLevel && typeActive === 1"
                @click="handleSubmit" v-loading="staking">
                {{$t('public.sure')}}
              </el-button>
            </div>
            <!-- 提示 -->
            <p class="center color999" v-if="!typeActive">{{$t('renew.consumeTip')}}</p>
            <p class="center color999" v-else>{{$t('ndxStake.mortgaged')}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 续费 -->
    <div class="renewMain" v-if="typeStatus === 1">
      <div class="flexb accoutTabCont">
        <div v-for="(item, index) in accountRenewActiveList"
          :key="index"
          class="accountTab"
          :class="{'accountChangeClass': index === accountActive}"
          @click="handleChangeRenewActive(index)"
          >
          {{ $t(`renew.${item.label}`) }}
        </div>
      </div>
      <div class="ownAccount">
        <!-- 本账户 -->
        <div class="accountLevel" v-if="!accountRenewActive">
          <span>{{ $t('order.account') }}：</span>
          <span>
            <span style="font-size: 15px;">{{ user.account }}</span>
            (<span style="font-size: 13px;">{{$store.state.app.scatter.chain.toUpperCase()}}</span>)
          </span>
          <span class="icon" style="cursor: pointer;">
            <img v-if="user"
            :src="handleGetVipLogo()" alt="">
          </span>
          <span>({{$t('renew.expire', { time : expireTime})}})</span>
        </div>
        <!-- 其他账户 -->
        <div class="flex otherInput" v-if="accountRenewActive || comfirmAccount" :class="{'flexc': accountRenewActive && !comfirmAccount}">
          <user-label
            :user="user"
            @listenUserLabel="listenUserLabel"
            :unstakeList="unstakeList"
            :getAccount_iserror="getAccount_iserror"
            :otherAccountInfo="otherAccountInfo"
            :accountName="accountName"
            :vipMode="vipMode"/>
        </div>
        <!-- 为其他账户续费按钮-->
        <div class="otherAccount" v-show="(accountRenewActive && !comfirmAccount)
        || (accountRenewActive && otherAccountInfo.consumeLevel === 0)
        || (accountRenewActive && otherAccountInfo.isRenew === 1)">
          <p class="center commonColor"
          v-if="accountActive === 1 && otherAccountInfo.vipMode === 1">
          {{$t('renew.otherAccountMode1')}}</p>
          <p class="center commonColor"
          v-else-if="accountActive === 1 && otherAccountInfo.isRenew === 1">
          {{$t('renew.vipTip1', {time:handleTime(user.expireTime)})}}</p>
          <p class="center commonColor"
          v-else-if="accountActive === 1 && otherAccountInfo.consumeLevel === 0">
          <span @click="handleToUpdateUpgrade" style="cursor: pointer;">{{$t('renew.otherAccountMode')}}</span></p>
          <el-button class="accountBtn"
          @click="handleComfirmAccountXuFei">{{$t('public.sure')}}</el-button>
        </div>
        <div v-show="(accountActive === 0)
          || (accountActive === 1 && comfirmAccount && otherAccountInfo.consumeLevel > 0 && otherAccountInfo.isRenew !== 1)">
          <!-- 续费方式 -->
          <div class="upgradeType">
            <p>{{$t('renew.renewMode')}}：{{$t('renew.consumeNDX')}}</p>
            <!-- <div class="mb15">
              <div class="typeTab changeClass">
                {{$t('renew.consumeNDX')}}
              </div>
            </div> -->
          </div>
          <!-- 续费周期 -->
          <div class="selectLevel">
            <p class="flex">
              <span class="mr5">{{$t('renew.renewTime')}}</span>
              <el-tooltip effect="light" placement="top">
                <div slot="content">
                  1{{$t('renew.months')}}=30{{$t('apiTrade.competitionDay')}}
                </div>
                <div class="volatility">
                  <i class="iconfont icon-huaban"></i>
                </div>
              </el-tooltip>
            </p>
            <div class="levelBtn btnLeft">
              <i class="iconfont el-icon-arrow-left"></i>
            </div>
            <div class="levelBtn btnRight">
              <i class="iconfont el-icon-arrow-right"></i>
            </div>
            <div class="mb15 levelCont">
              <!-- swiper -->
              <swiper ref="mySwiperRenew" :options="swiperOption1">
                <swiper-slide
                v-for="(item, index) in renewList"
                :key="index">
                  <div class="levelTab"
                    :class="{'changeClass': item.active === renewActive}"
                    @click="handleRenewTypeActive(item.active)"
                    style="padding-top: 12px;">
                    <span class="color333 mb5">
                      {{ item.period }}{{$t('renew.months')}}
                    </span>
                    <span>{{$t('renew.consume')}}</span>
                    <div class="price" style="margin-bottom: 7px;">
                      <span class="priceNum commonColor">
                        {{ item.ndxConsume >= 10000 ? `${item.ndxConsume / 1000}K` : item.ndxConsume }}
                      </span>
                    </div>
                    <span>NDX</span>
                    <span class="tagRed" v-if="item.discount!==1">
                      <span v-if="$store.state.app.language === 'zh-CN'">
                        {{ item.discountFormat }}折
                      </span>
                      <span v-else>
                        {{ 100 - Number(accMul(item.discountFormat, 10)) || 0 }}% off
                      </span>
                    </span>
                  </div>
                  <div class="swiper-pagination" slot="pagination"></div>
                </swiper-slide>
              </swiper>
            </div>
          </div>
          <div class="validity">
            <!-- 本账户 -->
            <p class="mb5" v-if="!accountRenewActive">
              {{$t('renew.renewOwn')}}
            </p>
            <!-- 其他账户 -->
            <p class="mb5" v-else>
              {{$t('renew.renewOther')}}
            </p>
            <p class="mortgable">{{$t('renew.myBalance')}}：{{ toFixed(ndxCanStakeBlance, 4) }} NDX</p>
          </div>
          <div class="bottomCont">
            <!-- 支付提示信息 -->
            <p class="center result">
              {{$t('renew.consume')}}
              <span class="commonColor">{{checkedLevel.discountStake}}</span>，
              {{$t('renew.grade')}}
              <span class="commonColor">VIP {{user.consumeLevel}}</span>，
              {{$t('renew.renew')}}
              <span class="commonColor">{{ checkedLevel.period }}{{$t('renew.months')}}</span>
            </p>
            <div class="comfirmBtn">
              <el-button class="btn" v-loading="staking" @click="handleSubmit">{{$t('public.sure')}}</el-button>
            </div>
            <p class="center color999">{{$t('renew.consumeTip')}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 赎回抵押弹窗 -->
    <el-dialog
      class="mortgageNdx"
      :visible.sync="mortgageNdxVisible"
      :close-on-click-modal="false"
      width="440px"
      append-to-body
      center>
      <mortgage-ndx
      @listenStakeAction = "listenStakeAction"
      :mortgageNdxVisible = "mortgageNdxVisible"
      :MortgageStatus="MortgageStatus"
      @listenUpdateData="handleUpdateData"
      :showList="showList"/>
    </el-dialog>
  </div>
</template>

<script>
import '@/assets/css/swiper.min.css';
import moment from 'moment';
import { Decimal } from 'decimal.js'
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import { vipLogo } from '@/utils/wallet';
import { toFixed, accMul, accDiv, regIsRenew, toLocalTime } from '@/utils/validate';
import { EosModel } from '@/utils/eos/index';
import MortgageNdx from '@/views/myWallet/member/components/MortgageNdx'; // 赎回抵押弹窗
import UserLabel from './userLabel';

export default {
  name: 'renew', // 续费升级
  data() {
    return {
      staking: false,
      mortgageNdxVisible: false,
      MortgageStatus: 0, // 1:抵押 2:赎回
      chain: 'EOS',
      accountName: '', // 账户名
      accountTrue: false,
      accountActive: 0, // 为本账户和其他账户升级 0-为本账户升级 1-为其他账户升级
      accountActiveList: [
        {
          value: 0,
          label: 'ownupdataVip',
        },
        {
          value: 1,
          label: 'otherupdataVip'
        }
      ],
      accountRenewActive: 0, // 为本账户和其他账户续费 0-为本账户续费 1-为其他账户续费
      accountRenewActiveList: [
        {
          value: 0,
          label: 'ownRenewalVip',
        },
        {
          value: 1,
          label: 'otherRenewalVip'
        }
      ],
      typeActive: 0, // 升级的方式 0-消耗NDX 1-抵押NDX
      typeActiveList: [
        {
          value: 0,
          label: 'consumeNDX',
        },
        {
          value: 1,
          label: 'stakeNDX'
        }
      ],
      levelActive: -1, // 抵押或消耗选择等级
      levelList: [], // 等级列表
      ruleList: [],
      checkedLevel: '', // 选择等级
      renewActive: -1, // 选择续费周期
      renewList: [], // 续费列表
      validityActive: 0, // 选择有效期
      validityList: [ // 有效期列表
      ],
      periodList: [],
      swiperOption: {
        slidesPerView: 4,
        slidesPerGroup: 4,
        spaceBetween: 10,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.el-icon-arrow-right',
          prevEl: '.el-icon-arrow-left'
        },
      },
      swiperOption1: {
        slidesPerView: 4,
        slidesPerGroup: 4,
        spaceBetween: 10,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.el-icon-arrow-right',
          prevEl: '.el-icon-arrow-left'
        },
      },
      comfirmAccount: false, // 确认过账户名
      ndxConsumeList: [], // 消耗数量列表
      ndxStakedList: [], // 抵押数量列表
      stakeNumber: null, // 为他人和为自己的抵押总数
      stakeOrtherNumber: null, // 他人和自己给自己的抵押总数
      selfStakeNumber: 0, // 为自己抵押数
      ndxCanStakeBlance: null, // 用户可用抵押ndx数
      ndxBlance: null, // 用户ndx余额
      getAccount_iserror: false, // 账户是否存在
      otherAccountInfo: {}, // 其他账号信息
      user: {}, // 自己和他人
      lastDays: 0, // 小于一个月 - <30 | >=30 - 大于一个月
      unstakeList: [], // 给他人抵押的列表
      theAccountStaked: 0, // 为该账户抵押数量
      showList: 1, // 显示赎回列表 1-到出借明细 0-赎回页面
      scatter: null,
      unstakeNumber: 0, // 用户当前赎回量
      expireTime: '', // 到期时间
    }
  },
  components: {
    swiper,
    swiperSlide,
    MortgageNdx,
    UserLabel
  },
  props: {
    typeStatus: Number, // 升级、续费 0-升级 1-续费
    renewHide: Boolean,
    selfAccountInfo: Object,
    vipMode: Number,
    myStakeNdxALL: Number,
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.scatter = this.$store.state.app.scatter;
        this.chain = this.scatter.chain;
      },
      deep: true,
    },
    renewHide: function change(val) {
      if (val) {
        this.user = this.selfAccountInfo;
        this.accountActive = 0;
        this.accountRenewActive = 0;
        this.comfirmAccount = false;
        this.typeActive = this.user.vipMode;
        this.accountName = '';
        this.accountTrue = false;
        this.handleBlanceIvit();
        this.expireTime = moment(this.user.expireTime).format('YYYY-MM-DD');
      }
    },
    levelActive: function change(val) { // 等级选择变化
      if (val === -1) return;
      const levelList = JSON.stringify(this.levelList);
      const level = JSON.parse(levelList).find(v => v.value === val);
      let validity = {};
      if (this.typeActive === 0) { // 消耗模式
        validity = this.validityList.find(v => v.active === this.validityActive);
      }
      this.checkedLevel = Object.assign(level, validity);
      this.checkedLevel.stakeFormat = `${toFixed(Math.abs(this.checkedLevel.stake), 4)} NDX`;
      let discountStake = 0;
      // 抵押升级 所需的NDX数量
      if (this.checkedLevel && this.typeActive === 1 && this.checkedLevel.period) {
        discountStake = Number(Decimal.mul(this.checkedLevel.stake, this.checkedLevel.period).toString());
      }
      // 折后数量
      if (this.checkedLevel && this.user.consumeLevel === 0 && this.typeActive === 0 && this.checkedLevel.period) {
        discountStake = Number(Decimal.mul(this.checkedLevel.stake, this.checkedLevel.discount).toString());
        discountStake = this.checkedLevel.discount === 0 ? this.checkedLevel.stake : discountStake;
        discountStake = Number(Decimal.mul(discountStake, this.checkedLevel.period).toString());
      }
      discountStake = `${toFixed(Math.ceil(discountStake), 4)} NDX`;
      this.checkedLevel.discountStake = discountStake;
      if (this.checkedLevel && this.user.consumeLevel > 0 && this.typeActive === 0) {
        this.handleLessDays();
      }
    },
    validityActive: function change(val) { // 消耗 - 月数选择
      const validity = this.validityList.find(v => v.active === val);
      this.checkedLevel = Object.assign(this.checkedLevel, validity);
      let discountStake = 0;
      // 抵押升级 所需的NDX数量
      if (this.checkedLevel && this.typeActive === 1 && this.checkedLevel.period && this.checkedLevel.stake) {
        discountStake = Number(Decimal.mul(this.checkedLevel.stake, this.checkedLevel.period).toString());
      }
      // 折后数量
      if (this.checkedLevel && this.user.consumeLevel === 0 && this.typeActive === 0 && this.checkedLevel.period && this.checkedLevel.stake) {
        discountStake = Number(Decimal.mul(this.checkedLevel.stake, this.checkedLevel.discount).toString());
        discountStake = this.checkedLevel.discount === 0 ? this.checkedLevel.stake : discountStake;
        discountStake = Number(Decimal.mul(discountStake, this.checkedLevel.period).toString());
      }
      discountStake = `${toFixed(Math.ceil(discountStake), 4)} NDX`;
      this.checkedLevel.discountStake = discountStake;
      if (this.checkedLevel && this.user.consumeLevel > 0 && this.typeActive === 0) {
        this.handleLessDays();
      }
    },
    renewActive: function change(val) { // 续费消耗 - 月数选择
      if (val === -1 || this.typeStatus === 0) return;
      const renew = this.renewList.find(v => v.active === val);
      this.checkedLevel = renew;
      // 折后数量
      let discountStake = Number(Decimal.mul(renew.ndxConsume, renew.discount).toString());
      discountStake = this.checkedLevel.discount === 1 ? renew.ndxConsume : discountStake;
      discountStake = `${toFixed(Math.ceil(discountStake), 4)} NDX`;
      this.checkedLevel.discountStake = discountStake;
      this.checkedLevel.value = this.user.consumeLevel;
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.user = this.selfAccountInfo;
    const sapp = this.$store.state.app;
    this.scatter = sapp.scatter;
    this.chain = sapp.scatter.chain || 'EOS';
    this.typeActive = this.user.vipMode;
    this.handleBlanceIvit();
    this.expireTime = moment(this.user.expireTime).format('YYYY-MM-DD');
  },
  beforeDestroy() {},
  methods: {
    // 确认升级
    handleSubmit() {
      // 抵押
      if (this.typeActive === 1) {
        if (this.checkedLevel.value === this.user.stakeLevel) return;
        this.handleStakeAction();
      }
      // 消耗 - 续费消耗
      if (this.typeActive === 0 || this.typeStatus === 1) {
        this.handleNewdexissuerAction();
      }
    },
    /*
     * 会员消耗模式
     * @param obj.memo // memo说明：vip等级-月数（有效期）-订单拥有人
    */
    handleNewdexissuerAction() {
      const month = this.typeStatus === 1 || this.user.consumeLevel === 0 ? this.checkedLevel.period : 1; // 月
      const stake = this.checkedLevel.discountStake; // 折后数量
      const stakeAccount = this.accountActive === 0 ? this.user.account : this.accountName; // 消耗对象
      const vip = this.checkedLevel.value;
      if (parseFloat(stake) > this.ndxCanStakeBlance) {
        this.$message.error(this.$t('jy.error3'));
        return;
      }
      const params = {
        quantity: stake,
        memo: `${vip}-${month}-${stakeAccount}`,
      };
      this.staking = true;
      EosModel.newdexissuerAction(params, (res) => {
        this.staking = false;
        if (res.processed) { // 合约操作成功6
          this.messageclose = this.$message.success(this.$t('newpos.successfulOperation'));
          this.$emit('listenRenew', 'close');
          return
        }
        EosModel.handleScatterErrorBack(res);
      })
    },
    // NDX 抵押stake / 赎回unstake --- Action
    handleStakeAction() {
      const quantity = this.checkedLevel.stakeFormat
      const stakeAccount = this.accountActive === 0 ? this.user.account : this.accountName;
      const name = this.checkedLevel.value > this.user.stakeLevel ? 'stake' : 'unstake';
      if (name === 'stake' && (parseFloat(quantity) > this.ndxCanStakeBlance)) {
        this.$message.error(this.$t('jy.error3'));
        return;
      }
      const params = {
        quantity,
        name,
        chain: 'eos',
        stakeAccount,
      };
      this.staking = true;
      EosModel.newdexStakex(params, (res) => {
        this.staking = false;
        let msg = `${this.$t('myWallet.diyaSuccess')}!`;
        if (name === 'unstake') {
          msg = this.$t('ndxStake.redeemSuccess');
        }
        if (res.processed) { // 合约操作成功6
          this.messageclose = this.$message.success(msg);
          this.$emit('listenRenew', 'close');
          return
        }
        EosModel.handleScatterErrorBack(res);
      })
    },
    // 为他人抵押确认账户名
    handleComfirmAccount() {
      if ((this.accountActive === 0 && this.typeActive === 0 && this.user.consumeLevel === 10)
        || (this.accountActive === 0 && this.typeActive === 1 && this.user.stakeLevel === 10)
        || (this.accountTrue && this.accountActive === 1 && this.typeActive === 0 && this.otherAccountInfo.consumeLevel === 10)
        || (this.accountTrue && this.accountActive === 1 && this.typeActive === 1 && this.otherAccountInfo.stakeLevel === 10)) {
        this.$emit('listenRenew', 'close');
        return;
      }
      if (this.accountTrue) {
        this.comfirmAccount = true;
      }
    },
    // 为他人续费确认账户名
    handleComfirmAccountXuFei() {
      if ((this.accountTrue && this.accountActive === 1 && this.otherAccountInfo.isRenew === 1)
      || (this.accountTrue && this.accountActive === 1 && this.otherAccountInfo.consumeLevel === 0)
      || (this.accountTrue && this.accountActive === 1 && this.otherAccountInfo.vipMode === 1)) {
        this.$emit('listenRenew', 'close');
        return;
      }
      if (this.accountTrue) {
        this.comfirmAccount = true;
      }
    },
    // 获取为别人抵押账号会员信息
    handleGetAccountInfo() {
      const params = {
        account: this.accountName
      };
      this.$http.post('/account/getAccountInfo', params).then((res) => {
        if (this.accountActive === 0) return;
        if (res.code !== 0 && res.code !== 1007) {
          return;
        }
        let userInfo = res.accountInfo;
        if (res.code === 1007) {
          userInfo = {
            account: this.accountName,
            chain: 'eos',
            ambassadorType: null,
            anonymous: 0,
            consumeLevel: 0,
            discountRate: 1,
            email: null,
            expireTime: null,
            isDealRemind: 0,
            isMarketRemind: 0,
            isRenew: 0,
            joinTime: null,
            language: this.$store.state.app.language,
            level: 0,
            maxLevel: 10,
            ndxStaked: 0,
            noRemindPartial: 0,
            orderTime: null,
            remainDealRemindCount: 10,
            remainDrawCount: 0,
            remainMarketRemindCount: 5,
            renewDuration: null,
            stakeLevel: 0,
            totalSaveAmount: 0,
            usedMarketRemindCount: 0,
            vipImageUrl: null,
            vipMode: 0,
            weight: 0,
            weightRatio: 0,
            remainFreeOrderCount: 1,
          }
        }
        this.otherAccountInfo = userInfo;
        this.otherAccountInfo.isRenew = regIsRenew(this.otherAccountInfo);
        this.user = this.otherAccountInfo;
        this.typeActive = this.user.vipMode;
        this.handleBlanceIvit();
        this.$nextTick(() => {
          this.handleMaozhong();
        });
      });
    },
    // 为本人-其他账户抵押消耗升级
    handleChangeActive(index) {
      this.accountActive = index;
      if (index) {
        this.comfirmAccount = Boolean(this.accountName) && this.accountTrue;
        if (this.typeActive === 0) {
          this.comfirmAccount = Boolean(this.accountName) && this.accountTrue && this.otherAccountInfo.consumeLevel < 10;
        }
        if (this.typeActive === 1) {
          this.comfirmAccount = Boolean(this.accountName) && this.accountTrue && this.otherAccountInfo.stakeLevel < 10;
        }
        if (this.accountTrue) {
          this.user = this.otherAccountInfo;
        } else {
          this.otherAccountInfo = {};
        }
      } else {
        this.comfirmAccount = false;
        this.user = this.selfAccountInfo;
      }
      this.handleCanStake();
      this.$nextTick(() => {
        this.handleMaozhong();
      });
    },

    // 为他人升级 选择升级方式
    handleChangeTypeActive(type) {
      this.typeActive = type;
      this.user.vipMode = type;
      this.handleCanStake();
      this.$nextTick(() => {
        this.handleMaozhong();
      });
    },
    // 选择等级
    handleLevelActive(val, disable) {
      if (disable && this.accountActive === 1) return;
      if (disable && this.accountActive === 0) {
        const level = this.levelList.filter(v => v.disable).length;
        const tip = this.$t('renew.otherStakedTip', { level });
        this.$confirm(tip, this.$t('public.reTip'), {
          confirmButtonText: this.$t('public.sure'),
          showCancelButton: false,
          center: true,
        }).then(() => {
        }).catch(() => {});
        return;
      }
      this.levelActive = val;
    },
    // 为本人-其他账户续费
    handleChangeRenewActive(index) {
      this.accountRenewActive = index;
      this.handleChangeActive(index);
    },
    // 续费周期切换
    handleRenewTypeActive(active) {
      this.renewActive = active;
    },
    // 选择有效期
    handleValidityActive(val) {
      this.validityActive = val;
    },
    // 获取等级说明
    handleLevelRule() {
      if (this.accountActive) return;
      this.$http.get('/levelRule/list').then((res) => {
        if (res.code !== 0) return;
        if (res.code === 0) {
          this.levelList = [];
          this.validityList = [];
          this.ruleList = res.ruleList;
          this.periodList = res.periodList; // 日期列表
          this.periodList.forEach((v, i) => {
            const levelList = {
              active: i,
              discount: v.discountRate,
              discountFormat: v.discountRate * 10,
              period: v.period,
              isDefault: v.isDefault,
            };
            this.validityList.push(levelList);
          });
          this.handleMaozhong();
        }
      });
    },
    // 默认选中
    handleMaozhong() {
      this.levelActive = -1;
      this.renewActive = -1;
      if (this.accountActive === 0) {
        this.typeActive = this.user.vipMode;
      }
      this.levelList = [];
      // typeActive 升级的方式 0-消耗NDX 1-抵押NDX
      this.ruleList.forEach((v, i) => {
        if (i > 0) {
          const levelList = {
            num: this.typeActive === 1 ? Number(v.ndxStaked) : Number(v.ndxConsume),
            value: i,
            disable: false,
            icon: `/static/img/vip/VIP-${i}.png`,
            stake: this.typeActive === 1 ? Number(v.ndxStaked) : Number(v.ndxConsume)
          };
          this.levelList.push(levelList);
        }
      });
      if (this.typeActive === 1 && this.accountActive === 0) {
        this.levelList.forEach((v) => {
          const vv = v;
          vv.disable = Number(v.num) <= (this.stakeOrtherNumber - this.selfStakeNumber);
          vv.stake = Decimal.sub(Number(v.num), Number(this.stakeOrtherNumber));
        })
      }
      if (this.typeActive === 1 && this.accountActive === 1 && this.accountName) {
        this.levelList.forEach((v) => {
          const vv = v;
          vv.disable = v.value <= this.user.stakeLevel;
          vv.stake = Number(v.num) - Number(this.user.ndxStaked);
        })
      }
      if (this.typeActive === 0 && this.user.consumeLevel === 0) {
        this.validityActive = this.validityList.findIndex(v => v.isDefault === 1);
      }
      if (this.typeStatus === 1) { // 续费
        this.renewList = [];
        const nowLevel = this.ruleList.find(v => v.level === this.user.consumeLevel);
        const ndxConsume = nowLevel.ndxConsume;
        this.validityList.forEach((v) => {
          const vv = v;
          vv.ndxConsume = v.period * ndxConsume;
          vv.consume = ndxConsume;
          // if (v.isDefault === 1) {
          //   this.renewActive = i;
          // }
          this.renewActive = 0;
        });
        this.renewList = this.validityList;
      }
      let consumeLevel = this.user.consumeLevel + 1;
      consumeLevel = consumeLevel >= 10 ? 10 : consumeLevel;
      let stakeLevel = this.user.stakeLevel + 1;
      stakeLevel = stakeLevel >= 10 ? 10 : stakeLevel;
      if (this.typeStatus === 1 && this.$refs.mySwiperRenew) { // 续费
        // const index = this.renewList.findIndex(v => v.isDefault === 1) || 0;
        this.$refs.mySwiperRenew.swiper.slideTo(0, 0, false);
        return;
      }
      if (this.typeStatus === 0 && this.typeActive === 0 && this.$refs.mySwiper) { // 消耗
        setTimeout(() => {
          this.levelActive = consumeLevel;
        }, 300);
        this.$refs.mySwiper.swiper.slideTo(0, 0, false);
      }
      if (this.typeStatus === 0 && this.typeActive === 1 && this.$refs.mySwiper) { // 抵押
        setTimeout(() => {
          this.levelActive = stakeLevel;
          this.$refs.mySwiper.swiper.slideTo(this.user.stakeLevel, 0, false);
        }, 300);
      }
    },
    // NDX抵押数stake / 赎回数unstake / 抵押总数stat
    handleGetStakexInfo(name) {
      const params = {
        name,
        actor: name === 'stat' ? 'NDX' : 'account',
        chain: this.chain
      }

      // 抵押表
      EosModel.newdexStakexInfo(params, (res) => {
        if (res.rows) {
          if (name === 'stake') {
            if (res.rows) {
              const item = res.rows.find(v => v.blockchain === this.chain);
              if (item) {
                this.stakeNumber = (Number(res.rows[0].staked_to_others) + Number(res.rows[0].self_staked)) / 10000;
                this.selfStakeNumber = Number(res.rows[0].self_staked) / 10000;
                this.stakeOrtherNumber = Number(res.rows[0].total_staked) / 10000;
              } else {
                this.stakeNumber = '0.0000 NDX';
                this.selfStakeNumber = 0;
                this.stakeOrtherNumber = 0;
              }
              this.unstakeNumber = res.rows[0] ? Number(res.rows[0].refunding) / 10000 : '0.0000 NDX';
              // this.releaseTime = res.rows[0] ? res.rows[0].release_time : '';
              const scat = this.$store.state.app.scatter;
              if (scat && scat.identity) {
                this.handleCanStake();
              }
            }
            if (this.chain === 'eos') {
              this.handleGetStakexInfo('stakeddetail');
            } else {
              this.ndxCanStakeBlance = 0;
            }
            this.handleLevelRule(); // 获取等级列表
          }
          if (name === 'stakeddetail') {
            const list = res.rows;
            this.unstakeList = [];
            list.forEach((v) => {
              const vv = v;
              vv.id = v.detail_id;
              vv.account = v.stakefor;
              vv.chain = v.blockchain.toUpperCase();
              vv.number = v.amount / 10000;
              vv.show = false;
              vv.numberError = false;
              this.unstakeList.push(vv);
            });
            this.theAccountStaked = this.unstakeList.find(v => v.account === this.accountName)
              ? this.unstakeList.find(v => v.account === this.accountName).number : 0;
          }
          // if (name === 'stat') { // 抵押总数
          //   this.totalStaked = res.rows[0] ? res.rows[0].total_staked : '0.0000 NDX';
          // }
        }
      });
    },
    // 余额获取
    handleBlanceIvit() {
      const scat = this.$store.state.app.scatter;
      if (scat && scat.identity && scat.chain === 'eos') {
        EosModel.getCurrencyBalance('NDX', 'newdexissuer', (result) => {
          if (result.error) return;
          let res = result;
          if (!res) return;
          if (res.length === 0) {
            res = '0.0000 NDX';
          } else {
            res = result[0];
          }
          this.ndxBlance = res;
          this.handleGetStakexInfo('stake');
        });
        return;
      }
      this.stakeOrtherNumber = 0;
      this.ndxCanStakeBlance = 0;
    },
    // 可抵押计算
    handleCanStake() {
      // 余额 - 已抵押 - 赎回中
      const ndxblance = parseFloat(this.ndxBlance);
      const stakeNumber = parseFloat(this.stakeNumber);
      // 在抵押
      const unstakeNumber = parseFloat(this.unstakeNumber);
      if (this.user.vipMode === 0) {
        this.ndxCanStakeBlance = ndxblance - stakeNumber - unstakeNumber;
      } else {
        this.ndxCanStakeBlance = ndxblance - stakeNumber;
      }
    },
    // 1:抵押 2:赎回
    handleMortgageNdxShow(val, showList) {
      if (val === 1) {
        this.MortgageStatus = 1;
      }
      if (val === 2) {
        this.MortgageStatus = 2;
      }
      this.showList = showList;
      this.mortgageNdxVisible = true;
      this.$emit('listenRenew', 'close');
    },
    listenStakeAction(val) {
      if (val === 'close') {
        this.mortgageNdxVisible = false;
      }
    },
    // 用户输入框回调
    listenUserLabel(key, val) {
      if (key === 'hasAccount') {
        this.accountName = val.accountNameInput;
        if (this.scatter.identity.accounts[0].name === this.accountName) {
          // 相同账户
          this.user = this.selfAccountInfo;
          this.accountName = '';
          this.otherAccountInfo = {};
          this.comfirmAccount = false;
          this.accountActive = 0;
          this.accountRenewActive = 0;
          this.accountName = '';
          this.accountTrue = false;
          return;
        }
        this.handleGetAccountInfo();
        this.accountTrue = true;
        this.theAccountStaked = val.theAccountStaked;
      }
      if (key === 'noAccount') {
        this.accountName = '';
        this.otherAccountInfo = {};
        this.user = this.selfAccountInfo;
        this.theAccountStaked = 0;
        this.accountTrue = false;
        this.accountActive = 1;
        this.accountRenewActive = 1;
        this.comfirmAccount = false;
      }
    },
    // 更换消耗抵押升级
    handleChange() {
      this.$emit('listenRenew', 'upgradeMode-show');
    },
    // 为其他账户续费去升级
    handleToUpdateUpgrade() {
      this.$emit('listenRenew', 'updateUpgrade');
      setTimeout(() => {
        this.accountActive = 1;
      }, 500);
    },
    // 获取VIP - Logo
    handleGetVipLogo() {
      let memberLevel = 0;
      if (this.typeActive === 0) {
        memberLevel = this.user.consumeLevel;
      }
      if (this.typeActive === 1) {
        memberLevel = this.user.stakeLevel;
      }
      return vipLogo(memberLevel || 0, 'NDX');
    },
    handleClose() {
      this.$emit('listenRenew', 'close');
    },
    // 数字截取 - 保留小数
    toFixed(num, p) {
      return toFixed(num, p);
    },
    // 消耗模式 计算剩余时间
    handleLessDays() { // 小于一个月 - true | false - 大于一个月
      // 获取当前日期
      const nowDate = new Date(); // 当前日期
      const now = new Date(nowDate).getTime();

      if (!this.user.expireTime) {
        this.user.toLocalDate = '';
        this.lastDays = 0;
        return;
      }
      const toLocalDate = moment(this.user.expireTime).format('YYYY-MM-DD HH:mm:ss');
      const expireTime = toLocalDate.replace(/-/g, '/');
      const lastDate = new Date(expireTime).getTime()
      let days = (lastDate - now) / (1000 * 60 * 60 * 24);
      if (days < 0) {
        this.lastDays = 0;
        return;
      }
      // days = Math.ceil(Number(days))
      days = toFixed(days, 0);
      this.lastDays = days;
      if (this.user.consumeLevel !== 0) {
        let count = 0;
        const renew = this.levelList.find(v => v.value === this.user.consumeLevel);
        if (days < 30) {
          // days < 30: 差额价格计算方式：升级后等级每个月消耗的NDX - （ 原等级每个月消耗的NDX / 30天 x 原有效期的剩余天数）
          const perPrice = Decimal.div(renew.num, 30).toString(); // 除
          const oldCount = Decimal.mul(perPrice, days).toString(); // 乘
          count = Decimal.sub(this.checkedLevel.num, oldCount).toString(); // 碱
        } else {
          // days >= 30: 消耗价格计算方式：（升级后等级的每个月消耗的NDX - 原等级的每个月消耗的NDX）/30天 x 有效期的剩余天数
          const perPrice = Decimal.div((this.checkedLevel.num - renew.num), 30).toString(); // 除
          count = Decimal.mul(perPrice, days).toString() // 乘
        }
        count = Decimal.mul(count, 10000).toString();
        count = Math.ceil(Number(count))
        count = Decimal.div(count, 10000).toString();
        count = toFixed(count, 4);
        this.checkedLevel.discountStake = `${count} NDX`;
      }
    },
    // 消耗会员日期
    handleTime(val) {
      const toLocalDate = toLocalTime(val);
      const expireTime = toLocalDate.replace(/-/g, '/');
      const lastDate = new Date(expireTime).getTime();
      const countDay = 360 * 1000 * 60 * 60 * 24
      const result = Decimal.sub(lastDate, countDay).toString()
      return toLocalTime(Number(result)).substring(0, 10)
    },
    // 赎回后回调
    handleUpdateData() {
      this.user = this.selfAccountInfo;
      this.handleBlanceIvit();
    },
    // 两数相乘
    accMul(num1, num2) {
      return accMul(num1, num2)
    },
    // 两数相除
    accDiv(num1, num2) {
      return accDiv(num1, num2)
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/views/myWallet/member/privilege/public.scss';
.renew {
  color: #333;
  padding: 0 35px;
  margin-top: -20px;

  .caption {
    font-size: 16px;
    color: #000;
    margin-bottom: 10px;
  }

  .otherAccount {
    // padding: 0 50px 30px;

    .accountInput {
      position: relative;

      span:nth-child(1) {
        width: 90px;
      }

      .inputError {
        position: absolute;
        left: 108px;
        bottom: -24px;
        color: #E51C23;
      }
    }

    .accountBtn {
      width: 100%;
      background: linear-gradient(to top, #EDC16C , #F9DB75);
      color: #8B572A;
      font-size: 18px;
      margin-top: 40px;
    }
  }

  .maxLevel {
    margin-top: 20px;
    font-size: 18px;
  }

  .renewAccount {
    padding: 30px;

    .renewOtherInput {
      width: 200px;
    }

    .inputError {
      left: 90px !important;
    }

    .otherRenewTip {
      text-align: center;
      margin-top: 50px;
    }
  }

  .ownAccount {
    .otherInput {
      position: relative;
      // margin: 20px 0 20px;

      span:nth-child(1) {
        width: 90px;
      }

      .accountName {
        width: 160px;
      }

      .inputError {
        position: absolute;
        left: 80px;
        bottom: -18px;
        color: #E51C23;
      }
    }

    .icon {
      img {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

  .accoutTabCont {
    border-bottom: 1px solid #EAEDFB;

    .accountTab {
      text-align: center;
      color: #999;
      line-height: 40px;
      width: 45%;
      cursor: pointer;
      border-bottom: 2px solid transparent;
    }

    .accountChangeClass {
      border-bottom: 2px solid$-changeColor;
      color: $-changeColor;
    }
  }

  .accountLevel {
    margin: 20px 0 15px;
  }

  .upgradeType {
    margin-bottom: 20px;

    p {
      margin-bottom: 5px;
    }

    .colorThis {
      margin-left: 5px;
      cursor: pointer;
    }

    .typeTab {
      display: inline-block;
      width: 140px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 5px;
      border: 1px solid rgba(154, 178, 237, .22);
      cursor: pointer;
      margin-right: 10px;
      color: #999;

      &.changeClass {
        color: $-changeColor;
      }
    }
  }

  .selectLevel {
    position: relative;

    p {
      margin-bottom: 5px;
    }

    .levelBtn {
      position: absolute;
      top: 65px;

      i {
        font-size: 24px;
        cursor: pointer;
        outline: none;
      }
    }

    .btnLeft {
      left: -30px;
    }

    .btnRight {
      right: -30px;
    }

    .levelCont {
      // overflow-x: scroll;
      overflow: hidden;
      margin-bottom: 10px !important;

      .levelWrap {
        width: 1200px;
      }

      .levelTab {
        position: relative;
        width: 110px;
        border-radius: 5px;
        height: 125px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(154, 178, 237, .22);
        cursor: pointer;
        color: #999;
        padding-top: 5px;

        .tagRed {
          position: absolute;
          right: 0;
          // top: -10px;
          top: 0px;
          width: 48px;
          height: 18px;
          line-height: 18px;
          background: #FF4D4D;
          border-radius: 0 5px 0 5px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          z-index: 10000;
        }

        .levelImg {
          display: inline-block;
          margin-bottom: 7px;
          width: 22px;
        }

        .price {
          margin-top: 7px;

          p {
            margin-bottom: 0;
          }

          .priceNum {
            font-size: 16px;
          }
        }
      }
    }

    .renewCont {
      .levelTab {
        position: relative;
        width: 25%;
        border-radius: 5px;
        height: 105px;
        flex-direction: column;
        border: 1px solid rgba(154, 178, 237, .22);
        cursor: pointer;
        margin-right: 10px;
        color: #999;

        .tagRed {
          position: absolute;
          right: 0;
          top: -20px;
          width: 48px;
          height: 24px;
          line-height: 24px;
          background: #FF4D4D;
          border-radius: 20px 20px 20px 0;
          color: #fff;
          font-size: 12px;
          text-align: center;
        }

        .price {
          margin-top: 10px;

          .priceNum {
            font-size: 16px;
          }
        }
      }
    }
  }

  .validity {
    color: #999;

    .colorThis {
      cursor: pointer;
    }

    .mortgableCont {
      padding: 15px;
      background: rgba(255, 242, 227, .6);
    }

    .mortgable {
      color: #333;
    }

    .volatility {
      i {
        font-size: 16px;
        cursor: pointer;
      }
    }

    .validityList {
      width: 100%;

      .validityWrap {
        margin-bottom: -30px;
      }

      .validityTab {
        display: inline-block;
        position: relative;
        width: 235px;
        margin: 0 10px 0 0;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid rgba(154, 178, 237, .22);
        border-radius: 5px;
        cursor: pointer;
        color: #333;

        .tag {
          position: absolute;
          right: 0;
          top: -0;
          width: 48px;
          height: 18px;
          line-height: 18px;
          background: #FF4D4D;
          border-radius: 0 5px 0 5px;
          color: #fff;
          font-size: 12px;
        }
      }

      .validityTab:nth-child(2n) {
        margin-right: 0;
        margin-bottom: 15px;
      }

      .validityTab:last-child {
        margin-bottom: 15px;
      }
    }
  }

  .bottomCont {
    margin-top: 40px;
    // .result {
    // }
    .comfirmBtn {
      margin: 15px 0;

      .btn {
        width: 100%;
        background: linear-gradient(to top, #EDC16C , #F9DB75);
        color: #8B572A;
        font-size: 18px;
      }
    }
  }
}
.swiper-button-disabled {
  display: none;
}
.theme-1B1D27 {
  .renew, .mortgable, .typeTab.changeClass, .validityTab, .color333 {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  .accoutTabCont {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .mortgableCont {
    background: rgba(255, 255, 255, 0.1) !important;
  }
  .upgradeType {
    .changeClass {
      color: #f5a623 !important;
    }
  }
}
</style>

